<template>
  <div class="classify_tree_silder" v-loading="loading">
    <div class="head-container" v-if="hasSearch !== false">
      <el-input
        v-model="name"
        placeholder="请输入关键字"
        clearable
        prefix-icon="el-icon-search"
        style="margin-bottom: 10px"
        @input="classifyInput"
      />
    </div>
    <div class="head-container">
      <el-tree
        :data="classifyOptions"
        :indent="10"
        :expand-on-click-node="false"
        @node-click="nodeClick"
        :props="{ children: 'sonList', label: 'name' }"
        :default-expanded-keys="['']"
        ref="tree"
        node-key="id"
        highlight-current>
        <div slot-scope="{ node, data }" class="node_item">
          <div class="node_item_title" :title="node.label">{{ node.label }}</div>
          <div class="node_item_buttons" v-if="isEdit !== false">
            <i class="el-icon-circle-plus-outline" title="新增" @click="add(data.id, node.label)"></i>
            <i class="el-icon-edit" title="修改" @click="edit(data.id, node.level)"></i>
            <i class="el-icon-delete" title="删除" @click="del(data.id, node.level)"></i>
          </div>
        </div>
      </el-tree>
    </div>
  </div>
</template>

<script>
import { tree } from '@/api/onlineClassroom/partyConstitutionRegulations'

export default {
  data () {
    return {
      loading: false,
      name: '',
      classifyOptions: []
    }
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    hasAll: {
      type: Boolean,
      default: false
    },
    hasSearch: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    this.getOrgTree(0)
  },
  methods: {
    // 更新数据
    updateKeyData (id) {
      this.getOrgTree()
      // if (!id && id !== 0) {
      //   this.getOrgTree()
      // } else if (id === 0) {
      //   this.getOrgTree(id)
      // } else {
      //   list({ parentId: id, fullNamePartyOrg: this.fullNamePartyOrg }).then(({ code, data }) => {
      //     if (code === 'success') {
      //       this.$refs.tree.updateKeyChildren(id, data)
      //     }
      //   })
      // }
    },

    // 点击节点触发
    nodeClick (data, node, dom) {
      this.$emit('nodeClick', data, node, dom)
    },
    // 单项调整
    add (id, label) {
      if (!id) {
        return this.$message.warning('该分类不存在, 请重试')
      }
      this.$emit('add', id, label)
    },
    async edit (id, level) {
      if (!id) {
        return this.$message.warning('该分类不存在, 请重试')
      }
      this.$emit('edit', id, level)
    },
    del (id, level) {
      if (!id) {
        return this.$message.warning('该分类不存在, 请重试')
      }
      this.$emit('del', id, level)
    },

    // 查询组织树
    getOrgTree () {
      this.loading = true
      tree({ name: this.name }).then(({ code, data }) => {
        this.classifyOptions = data
      }).finally(() => {
        this.loading = false
      })
    },
    // searchTree () {
    //   queryTree({ fullNamePartyOrg: this.fullNamePartyOrg }).then(({ code, data }) => {
    //     if (code === 'success') {
    //       this.classifyOptions = data
    //     }
    //   })
    // },
    // 关键字改变后触发
    classifyInput () {
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.getOrgTree()
      }, 250)
    }
  }
}
</script>

<style lang="scss" scoped>
.classify_tree_silder {
  height: 100%;
  width: 100%;
  border-right: 1px solid #CCC;
  padding-right: 20px;

  ::v-deep {
    .el-tree {
      background-color: transparent;
    }
    .el-tree-node.is-current>.el-tree-node__content {
      .node_item_buttons {
        display: block;
      }
    }

    .el-tree-node__content {
      &:hover {
        .node_item_buttons {
          display: block;
        }
      }
    }

    .node_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: calc(100% - 24px);
      font-size: 13px;
      overflow: hidden;

      .node_item_title {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .node_item_buttons {
        color: #ccc;
        font-size: 15px;
        padding-right: 5px;
        padding-left: 10px;
        display: none;

        i {
          transition: all .3s;
          font-weight: bold;
          padding-top: 2px;

          &:hover {
            transition: 0s;
            color: #349dff;
          }

          &+i {
            margin-left: 6px;
          }
        }
      }
    }
  }
}
</style>
